 <template>
	<div class="seller" ref="seller">
		<div class="seller-content">
			<div class="overview">
				<h1 class="title">{{seller.name}}</h1>
				<div class="desc border-bottom">
					<star :size="36" :score="seller.score"></star>
					<span class="text">({{seller.ratingCount}})</span>
					<span class="text">月售{{seller.sellCount}}单</span>
				</div>
				<ul class="remark">
					<li class="block border-right">
						<h2>起送价</h2>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>元
						</div>
					</li>
					<li class="block border-right">
						<h2>商家配送</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2>平均配送时间</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryTime}}</span>分钟
						</div>
					</li>
				</ul>
				<div class="favorite" @click="toggleFavorite">
					<span class="icon-favorite" :class="{'active':favorite}"></span>
					<span class="text">{{favoriteText}}</span>
				</div>
			</div>
			<split></split>
			<div class="bulletin">
				<h1 class="title">公告与活动</h1>
				<div class="content-wrapper border-bottom">
					<p class="content">{{seller.bulletin}}</p>
				</div>
				<ul v-if="seller.supports" class="supports">
	              <li class="support-item border-bottom" v-for="(item,index) in seller.supports" :key="index">
	                <span class="icon" :class="classMap[item.type]"></span>
	                <span class="text">{{item.description}}</span>
	              </li>
	            </ul>
			</div>
			<split></split>
			<div class="pics">
				<h1 class="title">商家实景</h1>
				<div class="pic-wrapper" ref="picWrapper">
					<ul class="pic-list" ref="picList">
						<li class="pic-item" v-for="pic in seller.pics">
			              <img :src="pic" width="120" height="90">
			            </li>
					</ul>
				</div>
			</div>
			<split></split>
			<div class="info">
				<h1 class="title border-top border-bottom">商家信息</h1>
				<ul >
					<li class="info-item border-bottom" v-for="info in seller.infos">{{info}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import star from 'components/star/star'
	import split from 'components/split/split'
	import BScroll from 'better-scroll'
	import {saveToLocal,loadFromLocal} from 'common/js/store'
	export default {
		props: {
			seller: Object
		},
		data() {
			return {
				favorite: (()=>{
					return loadFromLocal(this.seller.id,'favorite',false)
				})()
			}
		},
		computed: {
			favoriteText() {
				return this.favorite? '已收藏':'收藏'
			}
		},
 		created() {
		    this.classMap = ['decrease','discount','special','invoice','guarantee']
		},
		components: {
			star,
			split
		},
		watch: {
	      seller() {
	        this.$nextTick(() => {
	          this._initScroll();
	          this._initPics();
	        });
	      }
	    },
		mounted() {
			this.$nextTick(() => {
				this._initScroll(),
				this._initPics()
			})

		},
		methods: {
			toggleFavorite() {
				this.favorite=!this.favorite
				
				saveToLocal(this.seller.id,'favorite',this.favorite)
			},
			_initScroll() {
		        if (!this.scroll) {
		          this.scroll = new BScroll(this.$refs.seller, {
		            click: true
		          });
		        } else {
		          this.scroll.refresh();
		        }
	      	},
	      	_initPics() {
	      		if(this.seller.pics) {
					let picWidth = 120;
					let margin = 6;
					let width = (picWidth+margin)*this.seller.pics.length-margin;
					this.$refs.picList.style.width = width+'px';
					this.$nextTick(() => {
						if(!this.picScroll) {
								this.picScroll = new BScroll(this.$refs.picWrapper,{
								scrollX: true,
								eventPassThrough:'vertical'
							});
						}
						else {
							this.picScroll.refresh();
						}
					})
				}
	      	}
		}
	}
</script>

<style lang="stylus" scoped>
 @import "~common/stylus/mixin.styl"
 @import '~common/stylus/varibles.styl'
	.seller
		position absolute
		top 174px
		bottom 0
		left 0
		width 100%
		overflow hidden
		.overview
			padding 18px
			position relative
			.title
				margin-bottom 8px
				line-height  14px
				font-size 14px
				color $themeColor
			.desc
				padding 18px 0
				font-size 0
				border-bottom(rgba(7,17,27,0.1))
				.star
					display inline-block
					margin-right 8px
				.text
					display inline-block
					vertical-align top
					margin-right 12px
					line-height 18px
					font-size 10px
					color $bgColor
			.remark
				display flex
				padding-top 18px
				.block
					flex 1
					text-align center
					border-right(rgba(7,17,27,0.1))
					&:last-child
						border-none()
					h2
						margin-bottom 10px
						font-size 10px
						line-height 10px
						color $bgColor
					.content
						line-height 24px
						font-size 10px
						color $themeColor
						.stress
							font-size 24px
			.favorite
				position absolute
				right 11px
				top 18px
				text-align center
				.icon-favorite
					display block
					margin-bottom 4px
					color #d4d6d9
					line-height 24px
					font-size 24px
					&.active
						color $activeColor
				.text
					line-height 10px
					font-size 10px
					color $bgColor
						
		.bulletin
			padding 18px 18px 0 18px
			.title
				margin-bottom 8px
				line-height  14px
				font-size 14px
				color $themeColor
			.content-wrapper
				padding 0 12px 16px 12px
				border-bottom(rgba(7,17,27,0.1))
				.content
					line-height 24px
					font-size 12px
					color $activeColor					
			.supports
				.support-item
					padding 16px 12px
					font-size 0
					border-bottom(rgba(7,17,27,0.1))
					.icon
		            	display inline-block
		            	vertical-align top
		            	width 16px
		            	height 16px
		            	margin-right 4px
		            	background-size 16px 16px
		            	backgrond-repeat no-repeat
		            	&.decrease
		              	bg-image('decrease_4')
		            	&.discount
		              	bg-image('discount_4')
		            	&.guarantee
		              	bg-image('guarantee_4')
		            	&.special
		              	bg-image('special_4')
		            	&.invoice
		              	bg-image('invoice_4')	
		        	.text
		        		line-height 16px
		        		font-size 12px	
		        		color $themeColor	
		.pics
			padding 18px
			.title
				margin-bottom 12px
				line-height  14px
				font-size 14px
				color $themeColor 
			.pic-wrapper
				width 100%
				overflow hidden
				white-space: nowrap
				.pic-list
					font-size 0
					.pic-item 
						display inline-block 
						margin-right 6px
						width 120px
						height 90px  
						&.last-child
							margin-right 0     	
		.info
			padding 18px 18px 0 18px
			color $themeColor
			.title
				padding-bottom 8px
				line-height  14px
				font-size 14px
				border-bottom(rgba(7,17,27,0.1))
			.info-item
				padding 16px 12px
				line-height 16px
				font-size 12px
				border-bottom(rgba(7,17,27,0.1))
				&:last-child
					border-none()

						
</style>